
    <div class="app-container">
        <el-row :gutter="20">
            <!--用户数据-->
            <el-col :lg="24" :sm="24">
                <el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" v-show="showSearch" 
                        @submit.native.prevent>
                    <el-form-item label="关键词" prop="keywords">
                        <el-input v-model="queryParams.keywords" placeholder="请输入关键词" clearable />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>

                <!-- 数据区域 -->
                <el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center"/>
<el-table-column prop="title" label="操作模块" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="businessType" label="业务类型" align="center"  />
<el-table-column prop="method" label="请求方法" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="requestMethod" label="请求方式" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="operatorType" label="操作类别" align="center"  />
<el-table-column prop="operName" label="操作人员" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="operUrl" label="请求url" align="center">
    <template slot-scope="scope">
        <el-image class="table-td-thumb" fit="contain" :src="scope.row.operUrl" :preview-src-list="[scope.row.operUrl]">
            <div slot="error"><i class="el-icon-document" /></div>
        </el-image>
    </template>
</el-table-column>
<el-table-column prop="operIp" label="操作地址" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="operLocation" label="操作地点" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="status" label="操作状态" align="center"  />
<el-table-column prop="errorMsg" label="错误消息" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="operTime" label="操作时间" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="elapsed" label="操作用时" align="center"  />

                    <el-table-column label="操作" align="center" width="140">
                        <template slot-scope="scope">
                        </template>
                    </el-table-column>
                </el-table>
                <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

            </el-col>
        </el-row>
        <!-- 添加或修改操作日志对话框 -->
        <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" >
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row :gutter="20" style="display: flex; flex-wrap: wrap;">

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>